@themGray: #eaeaea;
@themAGray: #b3aeae;
@themRed: #ea4a36;
@themLRed: #e1251b;
@themFontColor: #333;
@themLLRed: #e12228;

#wrap {

    // 中间部分
    #mid_nav {

        // 版心
        .container {
            display: flex;
            justify-content: space-between;

            // 左边部分
            .toleft {

                // 面包屑导航
                .crumb {
                    margin-top: 15px;
                    padding: 9px 15px 9px 0;
                }

                // 内左边部分
                .left {
                    width: 400px;
                    height: 400px;
                    border: 1px solid #DFDFDF;

                    // 手机盒子
                    .phonebox {
                        position: relative;
                        width: 400px;
                        height: 400px;

                        // 小图片
                        img {
                            position: absolute;
                            width: 400px;
                            height: 400px;
                        }

                        // 蒙版
                        .mask {
                            position: absolute;
                            width: 200px;
                            height: 200px;
                            top: 0;
                            left: 0;
                            border: 1px solid #ddd;
                            background-color: rgba(255, 255, 255, .8);
                            box-sizing: border-box;
                            display: none; //默认隐藏
                        }

                        // 最顶层的盒子
                        .indexbox {
                            position: absolute;
                            width: 400px;
                            height: 400px;
                            left: 0;
                            top: 0;
                            z-index: 100;
                        }

                        // 大图片
                        .zoom {
                            width: 400px;
                            height: 400px;
                            position: absolute;
                            top: 0;
                            left: 400px;
                            border: 1px solid #ddd;
                            box-sizing: border-box;
                            overflow: hidden;
                            display: none; //默认隐藏

                            img {
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 800px;
                                height: 800px;
                            }
                        }
                    }

                    // 图片列表
                    .piclist {
                        width: 400px;
                        margin-top: 5px;
                        display: flex;

                        // 箭头
                        .prev,
                        .next {
                            width: 12px;
                            height: 54px;
                            line-height: 54px;
                            text-align: center;
                            background-color: @themGray;
                            border: 1px solid @themAGray;
                            cursor: pointer;
                            user-select: none;
                        }

                        // 中间的图片列表
                        .outer {
                            height: 58px;
                            flex: 1;
                            width: 372px;
                            overflow: hidden;
                            position: relative;

                            // ul
                            .listqueue {
                                display: flex;
                                position: absolute;
                                left: 0;
                                top: 0;
                                transition: all .8s;

                                // 每个li
                                .listitem {
                                    border: 1px solid #ddd;
                                    margin: 0 12px;
                                    height: 55px;
                                    width: 50px;
                                    box-sizing: border-box;

                                    img {
                                        width: 48px;
                                        height: 50px;
                                    }
                                }
                            }
                        }
                    }
                }
            }


            // 独立的一行内容
            .boxitem {
                margin: 10px 0;
                width: 520px;
                height: 34px;
                line-height: 34px;

                // 属性名
                .title {
                    padding-right: 15px;
                    color: #333;
                }

                // 属性内容
                .content {

                    .price_font {
                        font-size: 12px;
                    }

                    .price {
                        font-size: 20px;
                        font-weight: bold;
                    }

                    .add_price {
                        background: #c81623;
                        padding: 3px;
                        color: #fff;
                    }

                    .btn {
                        user-select: none;
                        cursor: pointer;
                        margin-right: 5px;
                        color: #666;
                        line-height: 24px;
                        padding: 6px 14px;
                        border-top: 1px solid #eee;
                        border-left: 1px solid #eee;
                        border-right: 1px solid #bbb;
                        border-bottom: 1px solid #bbb;
                    }

                    .active {
                        color: red;
                    }
                }
            }

            // 右边部分
            .right {
                margin-top: 30px;
                padding: 9px 15px 9px 0;
                width: 700px;
                height: 555px;
                overflow: hidden;

                .discount {
                    color: @themLLRed;
                    font-size: 12px;
                    margin-top: 15px;
                }

                // 价格栏
                .colorbox {
                    margin-top: 10px;
                    background-color: #fee9ec;
                    color: @themLLRed;
                    padding: 7px;
                    height: 115px;

                }

                // 一条横线
                .line {
                    margin-top: 5px;
                    height: 0;
                    border-top: 1px solid @themGray;
                }

                // 已选中的商品
                .choosed {
                    margin-top: 10px;

                    mark {
                        display: inline-block;
                        height: 30px;
                        line-height: 30px;
                        background: snow;
                        border: 1px solid #ddd;
                        padding: 0 20px;
                        margin-right: 20px;

                        span {
                            color: red;
                            margin-left: 20px;
                            cursor: pointer;
                        }
                    }
                }

                .labels {
                    margin-top: 10px;
                }

                // 加入购物车
                .goodscar {
                    display: flex;
                    justify-content: flex-start;

                    // 计数器
                    .control {
                        display: flex;
                        margin-right: 30px;

                        input {
                            width: 40px;
                            height: 40px;
                            border: 1px solid @themGray;
                            box-sizing: border-box;
                        }

                        .computed {
                            display: flex;
                            flex-direction: column;

                            .add {
                                width: 17px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                background-color: @themGray;
                                cursor: pointer;
                            }

                            .reduce {
                                width: 17px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                background-color: @themGray;
                                cursor: pointer;
                            }
                        }
                    }

                    // 按钮
                    .carbtn {
                        padding: 0 25px;
                        line-height: 36px;
                        font-size: 16px;
                        background: #e1251b;
                        border: none;
                        outline: none;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }


        }
    }
}